<template>
  <section :class="['nes-balloon', fromClass]" :style="balloonStyle">
    <slot />
  </section>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  from: { type: String, default: 'left' },
  color: { type: String, default: '' },
  fontSize: { type: [String, Number], default: '18px' },
  font: { type: String, default: 'Press Start 2P, Consolas, monospace' },
})
const fromClass = computed(() => props.from === 'right' ? 'from-right' : 'from-left')
const balloonStyle = computed(() => {
  const style = {}
  if (props.color) {
    style.background = props.color
    style['--balloon-bg'] = props.color
  }
  style.fontFamily = props.font
  style.fontSize = typeof props.fontSize === 'number' ? props.fontSize + 'px' : props.fontSize
  return style
})
</script>

<style scoped>
.nes-balloon {
  font-family: 'Press Start 2P', 'zpix';
}
.nes-balloon.from-left::before {
  background-color: var(--balloon-bg, #fff);
}
.nes-balloon.from-left::after {
  background-color: var(--balloon-bg, #fff);
}


.nes-balloon.from-right::before {
  background-color: var(--balloon-bg, #fff);
}
.nes-balloon.from-right::after {
  background-color: var(--balloon-bg, #fff);
}
</style>